<template>
  <div>
<form action="/">
  <van-search
    v-fofo
    v-model="value"
    @input="inp"
    show-action
    placeholder="请输入搜索关键词"
    @cancel="onCancel"
  />
</form>
<!-- 内容 -->
<div class="item" v-for="(item,i) in List" :key="i" @click="items(item)">
  <p class="txt">{{item.communityName}}</p>
</div>
  </div>
</template>

<script>
import { search } from '@/api'
export default {
  data () {
    return {
      value: '',
      List: [],
      // 结束计时器
      timer: null
    }
  },
  created () {
  },
  methods: {
    onCancel () {
      this.$router.push('/Add')
    },
    inp () {
      // 防抖
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        if (this.value.length === 0) {
          this.List = []
        } else {
          // console.log(this.value)
          const id = JSON.parse(localStorage.getItem('id'))
          // console.log(id.value)
          const res = await search({ name: this.value, id: id.value })
          // console.log(res)
          this.List = res.data.body
        }
      }, 400)
    },
    items (item) {
      console.log(item)
      this.$router.push({
        path: '/Add',
        query: {
          name: item
        }
      })
    }
  },
  directives: {
    // 默认选中光标
    fofo: {
      inserted (el) {
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          // 如果值是input标签/textarea标签
          el.focus()
          // 也可能是第三方插件
        } else {
          // 指令在van-search组件身上, 获取的是组件根标签div, 而input在标签内
          const inp = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          // 如果找到了
          if (inp || textArea) {
            inp && inp.focus()
            textArea && textArea.focus()
          } else {
            // 本身也不是, 子标签里也没有
            console.error('请把v-fofo用在输入框标签上')
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  // background-color: pink;
  padding: 5px;
  width: 90%;
  height: 38px;
  margin: 0 auto;
  border-bottom: 1px rgb(223, 223, 223) solid;
  .txt {
    font-size: 14px;
  }
}
</style>
